<template>
  <div class="map-container">
    <div class="btn-container">
      <el-button style="width: 100px;height: 100%;" :disabled="!editStatus"
        @click="operateTool('marker')">添加标注</el-button>
      <el-button style="width: 100px;height: 100%;" :disabled="!editStatus" @click="operateTool('rect')">矩形</el-button>
      <el-button style="width: 100px;height: 100%;" :disabled="!editStatus" @click="operateTool('line')">线形</el-button>
      <el-button style="width: 100px;height: 100%;" :disabled="!editStatus"
        @click="operateTool('polygon')">多边形</el-button>
      <el-button style="width: 100px;height: 100%;" :disabled="!editStatus"
        @click="operateTool('circle')">圆形</el-button>
      <el-button style="width: 100px;height: 100%;" :disabled="editStatus" @click="handleEdit"
        type="primary">确认编辑</el-button>
      <el-button style="width: 100px;height: 100%;" :disabled="editStatus" @click="handleRemove"
        type="danger">删除</el-button>
    </div>

    <!-- 筛选使用的内容 -->
    <div class="input-container">
      <el-select @change="selectChange" v-model="currentSearch" filterable placeholder="请选择">
        <el-option v-for="item in stationList" :key="item.siteId" :label="item.siteName"
          :value="item.siteId"></el-option>
      </el-select>
    </div>
    <div class="chebox-container">
      <el-checkbox-group @change="handleChange" v-model="currentSelect">
        <el-checkbox style="width: 50%;margin-right: 0;" :label="item.id" v-for="item in modelList" :key="item.id">
          <div class="chebox-item">
            <div class="item-name">{{ item.name }}</div>
            <div class="item-icon"><img :src="`http://124.117.237.118:7018/api/sysFileInfo/preview?id=${item.icon}`"
                alt=""></div>
          </div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <!-- 标注信息弹框 -->
    <el-dialog :show-close="false" :title="title" :visible.sync="open" append-to-body width="500px">
      <el-form ref="form" label-width="120px" label-position="left" :model="form" :rules="rules">
        <el-form-item label="标注名称" prop="markName">
          <el-input v-model="form.markName" placeholder="请输入标注名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查询信息接口 -->
    <el-dialog title="详情" :visible.sync="detailDialog.detailVisible">
      <div class="detail-form-container">
        <div class="form-top">
          <div class="top-pic">
            <img src="./preview.png" alt="">
          </div>
          <div class="top-title">{{ detailDialog.detailType === 1 ? '中心换热站' : '管道属性' }}</div>
        </div>
        <div class="form-content">
          <div v-if="detailDialog.detailType === 1">
            <div class="content-item">
              <el-descriptions title="一次网" :column="3" border>
                <el-descriptions-item label="功率">0 m³/h</el-descriptions-item>
                <el-descriptions-item label="一次网供温">20.58 °C</el-descriptions-item>
                <el-descriptions-item label="一次网回温">21.01°C</el-descriptions-item>
                <el-descriptions-item label="一次网供压">0.3MPa</el-descriptions-item>
                <el-descriptions-item label="一次网回压">0.28MPa</el-descriptions-item>
                <el-descriptions-item label="液位">0.85m</el-descriptions-item>
                <el-descriptions-item label="补水量">12280.7t</el-descriptions-item>
                <el-descriptions-item label="用电量">2113838kWt</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="content-item" v-for="item in 3" :key="item">
              <el-descriptions title="里间" :column="3" border>
                <el-descriptions-item label="分流量">4.71 t/h</el-descriptions-item>
                <el-descriptions-item label="分回温">20.58 °C</el-descriptions-item>
                <el-descriptions-item label="变频给定">24</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>

          <div v-else>
            <div class="content-item">
              <el-descriptions title="管线信息" :column="3" border>
                <el-descriptions-item label="口径">1mm</el-descriptions-item>
                <el-descriptions-item label="材质">1</el-descriptions-item>
                <el-descriptions-item label="壁厚">1mm</el-descriptions-item>
                <el-descriptions-item label="安装日期">1</el-descriptions-item>
                <el-descriptions-item label="埋深">0.28meters</el-descriptions-item>
                <el-descriptions-item label="维修记录">1</el-descriptions-item>
                <el-descriptions-item label="使用年限">12 years</el-descriptions-item>
                <el-descriptions-item label="弯头">1</el-descriptions-item>
                <el-descriptions-item label="变径">1</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>

        </div>
      </div>
    </el-dialog>
    <!-- 地图 -->
    <div id="mapDiv"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 选择
      currentSearch: '',
      // 复选框当前选中 1换热站 2一次网（供水）3
      currentSelect: ['1', '2', '3', '4', '5', '6', '7', '8'],
      // 数据结构示例
      modelList: [
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "3",
          "layerNo": null,
          "type": "2",
          "name": "一次网（供水）",
          "icon": "1739109458529312770",
          "color": "#fefe3d",
          "size": "1",
          "layerIndex": null,
          "opacity": 0,
          "sort": null,
          "status": null,
          "children": [
            {
              "siteId": 41,
              "siteName": "管线测试1",
              "catalogueId": 0,
              "location": "[[88.583461,43.809],[87.768549,43.815551],[84.564444,43.822862]]",
              "pipId": 1,
              "type": 2,
              "pipName": "e测光",
              "caliber": 2,
              "material": "2",
              "wall": 2,
              "date": "2023-12-07",
              "depth": 11,
              "records": "11",
              "life": 11,
              "elbow": 11,
              "remark": "121",
              "reducing": 11
            }
          ]
        },
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "4",
          "layerNo": null,
          "type": "2",
          "name": "一次网（回水）",
          "icon": "1739109504201089025",
          "color": "#0000FF",
          "size": "1",
          "layerIndex": null,
          "opacity": 0,
          "sort": null,
          "status": null,
          "children": [
            {
              "siteId": 42,
              "siteName": "管线测试2",
              "catalogueId": 0,
              "location": "[[88.583461,43.809],[87.768549,43.815551],[84.564444,43.822862]]",
              "pipId": 2,
              "type": 2,
              "pipName": "洪文一里",
              "caliber": 2.3,
              "material": "123",
              "wall": 123,
              "date": "2023-12-20",
              "depth": 213,
              "records": "123",
              "life": 123,
              "elbow": 123,
              "reducing": 123
            }
          ]
        },
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "1",
          "layerNo": null,
          "type": "1",
          "name": "换热站",
          "icon": "1739109363477995522",
          "color": "11",
          "size": "[36,36]",
          "layerIndex": 0,
          "opacity": 1,
          "sort": null,
          "status": null,
          "children": [
            {
              "siteId": 1,
              "siteName": "中心换热站",
              "catalogueId": 100008,
              "address": "沙依巴克区西山东街63号",
              "street": "西山片区管委会马料地街南社区（杜书记18140811953）",
              "location": "87.568993,43.811599",
              "type": 1
            },
            {
              "siteId": 2,
              "siteName": "迪丰换热站",
              "catalogueId": 100009,
              "address": "沙依巴克区西山东街63号",
              "street": "西山片区管委会马料地街南社区（杜书记18140811953）",
              "location": "87.56615,43.812048",
              "type": 1
            },
            {
              "siteId": 3,
              "siteName": "161高层换热站",
              "catalogueId": 100010,
              "address": "沙依巴克区西山东街63号",
              "street": "西山片区管委会马料地街南社区（杜书记18140811953）",
              "location": "87.565234,43.81092",
              "type": 1
            },
            {
              "siteId": 4,
              "siteName": "156队换热站",
              "catalogueId": 100011,
              "address": "沙依巴克区西山东街82号",
              "street": "环卫路片区管委会中泰社区（8773268、鲁洁书记18999289128）",
              "location": "87.567251,43.807377",
              "type": 1
            },
            {
              "siteId": 5,
              "siteName": "九队换热站",
              "catalogueId": 100012,
              "address": "沙依巴克区西虹西路1018号",
              "street": "西山片区管委会马料地社区（8772194、高敏书记13899966121）",
              "location": "87.570121,43.807549",
              "type": 1
            },
            {
              "siteId": 6,
              "siteName": "中泰化学换热站",
              "catalogueId": 100013,
              "address": "沙依巴克区西山东街232号",
              "street": "环卫路片区管委会中泰社区（8773268、鲁洁书记18999289128）",
              "location": "87.563455,43.808281",
              "type": 1
            },
            {
              "siteId": 7,
              "siteName": "绿城换热站",
              "catalogueId": 100014,
              "address": "沙依巴克区西虹西路980号",
              "street": "环卫路片区管委会马料地社区（8772194、高敏书记13899966121）",
              "location": "87.572955,43.808649",
              "type": 1
            },
            {
              "siteId": 8,
              "siteName": "五运司换热站",
              "catalogueId": 100015,
              "address": "沙依巴克区西山西路572号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.581898,43.808984",
              "type": 1
            },
            {
              "siteId": 9,
              "siteName": "海龙换热站",
              "catalogueId": 100016,
              "address": "沙依巴克区南梁坡南巷59号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.587916,43.810038",
              "type": 1
            },
            {
              "siteId": 10,
              "siteName": "康普换热站",
              "catalogueId": 100017,
              "address": "沙依巴克区西虹西路408号",
              "street": "雅山片区管委会西虹社区（5623222、阿书记15699222761）",
              "location": "87.590926,43.811612",
              "type": 1
            },
            {
              "siteId": 11,
              "siteName": "恒产换热站",
              "catalogueId": 100018,
              "address": "沙依巴克区西虹西路377号",
              "street": "八一片区管委会瑞安社区（苏主任18119131282）",
              "location": "87.592107,43.813616",
              "type": 1
            },
            {
              "siteId": 12,
              "siteName": "啤酒花换热站",
              "catalogueId": 100019,
              "address": "沙依巴克区西山路70号",
              "street": "西山片区管委会马料地街西山东街北社区（8770839、胡书记13659909069）",
              "location": "87.56364,43.811368",
              "type": 1
            },
            {
              "siteId": 13,
              "siteName": "中山小区换热站",
              "catalogueId": 100020,
              "address": "沙依巴克区西环中路151号",
              "street": "西山片区管委会平川路社区（8777310、刘书记15352629095）",
              "location": "87.567035,43.819408",
              "type": 1
            },
            {
              "siteId": 14,
              "siteName": "美和苑换热站",
              "catalogueId": 100021,
              "address": "沙依巴克区西环中路99号",
              "street": "西山片区管委会平川路社区（8777310、刘书记15352629095）",
              "location": "87.564812,43.820231",
              "type": 1
            },
            {
              "siteId": 15,
              "siteName": "兵团机关换热站",
              "catalogueId": 100022,
              "address": "沙依巴克区西环中路379号",
              "street": "西山片区管委会马料地街南社区（8767387、杜书记18140811953）",
              "location": "87.568796,43.815541",
              "type": 1
            },
            {
              "siteId": 16,
              "siteName": "艾矿换热站",
              "catalogueId": 100023,
              "address": "沙依巴克区克西路968号",
              "street": "西山片区管委会平川路社区（8777310、刘书记15352629095）",
              "location": "87.564381,43.821574",
              "type": 1
            },
            {
              "siteId": 17,
              "siteName": "塞外江南换热站",
              "catalogueId": 100024,
              "address": "沙依巴克区克拉玛依西街1096号",
              "street": "西山片区管委会平川路社区（8777310、刘书记15352629095）",
              "location": "87.563622,43.819213",
              "type": 1
            },
            {
              "siteId": 18,
              "siteName": "喀什师范换热站",
              "catalogueId": 100025,
              "address": "沙依巴克区西环中路永乐四巷369号",
              "street": "西山片区管委会永乐一巷社区（8782875、张书记13899988441）",
              "location": "87.563128,43.81812",
              "type": 1
            },
            {
              "siteId": 19,
              "siteName": "儿童村换热站",
              "catalogueId": 100026,
              "address": "沙依巴克区西路2233号",
              "street": "骑马山片区管委会儿童村社区（5100597、马书记18999118120）",
              "location": "87.56315,43.824043",
              "type": 1
            },
            {
              "siteId": 20,
              "siteName": "北晟换热主站",
              "catalogueId": 100027,
              "address": "沙依巴克区克拉玛依西街",
              "street": "西山片区管委会平川路社区（8777310、刘书记15352629095）",
              "location": "87.562813,43.822576",
              "type": 1
            },
            {
              "siteId": 21,
              "siteName": "北晟空调换热站",
              "catalogueId": 100028,
              "address": "沙依巴克区克拉玛依西街",
              "street": "西山片区管委会平川路社区（8777310、刘书记15352629095）",
              "location": "87.561735,43.822114",
              "type": 1
            },
            {
              "siteId": 22,
              "siteName": "档案馆换热站",
              "catalogueId": 100029,
              "address": "沙依巴克区克拉玛依西街2699号",
              "street": "骑马山片区管委会水库街社区（5106261、周书记13999111711）",
              "location": "87.554194,43.822017",
              "type": 1
            },
            {
              "siteId": 23,
              "siteName": "和顺欧典换热站",
              "catalogueId": 100030,
              "address": "沙依巴克区平川路198号",
              "street": "西山片区管委会永乐一巷社区（8782875、张书记13899988441）",
              "location": "87.558995,43.81919",
              "type": 1
            },
            {
              "siteId": 24,
              "siteName": "凯旋名都换热站",
              "catalogueId": 100031,
              "address": "沙依巴克区平川路199号",
              "street": "西山片区管委会永平巷社区（8772057、张亦书记15899239760）",
              "location": "87.556489,43.816833",
              "type": 1
            },
            {
              "siteId": 25,
              "siteName": "金域国际换热站",
              "catalogueId": 100032,
              "address": "沙依巴克区泽普街500号",
              "street": "西山片区管委会永平巷社区（8772057、张亦书记15899239760）",
              "location": "87.555016,43.818198",
              "type": 1
            },
            {
              "siteId": 26,
              "siteName": "金域缇香换热站",
              "catalogueId": 100033,
              "address": "沙依巴克区马料地街南二巷99号",
              "street": "西山片区管委会马料地街南社区（8767387、杜书记18140811953）",
              "location": "87.563635,43.814422",
              "type": 1
            },
            {
              "siteId": 27,
              "siteName": "中泰雅居换热站",
              "catalogueId": 100034,
              "address": "沙依巴克区恰尔巴格街2100号",
              "street": "西山片区管委会马料地街西社区（8723017、刘书记18999273071）",
              "location": "87.555191,43.815756",
              "type": 1
            },
            {
              "siteId": 28,
              "siteName": "区机关换热站",
              "catalogueId": 100035,
              "address": "沙依巴克区西环中路461号",
              "street": "西山片区管委会马料地街南社区（8767387、杜书记18140811953）",
              "location": "87.569559,43.812812",
              "type": 1
            },
            {
              "siteId": 29,
              "siteName": "公安厅警卫局换热站",
              "catalogueId": 100036,
              "address": "沙依巴克区西环中路299号",
              "street": "西山片区管委会马料地街南社区（8767387、杜书记18140811953）",
              "location": "87.567907,43.815928",
              "type": 1
            },
            {
              "siteId": 30,
              "siteName": "绿城B区1号楼换热站",
              "catalogueId": 100037,
              "address": "沙依巴克区西虹西路660号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.579261,43.808252",
              "type": 1
            },
            {
              "siteId": 31,
              "siteName": "绿城B区10号楼换热站",
              "catalogueId": 100038,
              "address": "沙依巴克区西虹西路660号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.582836,43.808411",
              "type": 1
            },
            {
              "siteId": 32,
              "siteName": "绿城B区12号楼换热站",
              "catalogueId": 100039,
              "address": "沙依巴克区西虹西路660号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.58316,43.808366",
              "type": 1
            },
            {
              "siteId": 33,
              "siteName": "绿城B区13号楼换热站",
              "catalogueId": 100040,
              "address": "沙依巴克区西虹西路660号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.584049,43.808538",
              "type": 1
            },
            {
              "siteId": 34,
              "siteName": "绿城B区14号楼换热站",
              "catalogueId": 100041,
              "address": "沙依巴克区西虹西路660号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.583497,43.808119",
              "type": 1
            },
            {
              "siteId": 35,
              "siteName": "绿城B区16号楼换热站",
              "catalogueId": 100042,
              "address": "沙依巴克区西虹西路660号",
              "street": "雅山片区管委会南梁坡社区（马书记13899993832）",
              "location": "87.583501,43.807738",
              "type": 1
            },
            {
              "siteId": 36,
              "siteName": "北园春换热站",
              "catalogueId": 100043,
              "address": "沙依巴克区平川路33号",
              "street": "西山片区管委会永平巷社区（8772057、张亦书记15899239760）",
              "location": "87.556983,43.820742",
              "type": 1
            },
            {
              "siteId": 37,
              "siteName": "海之城换热站",
              "catalogueId": 100044,
              "address": "沙依巴克区平川路33号",
              "street": "西山片区管委会永平巷社区（8772057、张亦书记15899239760）",
              "location": "87.565414,43.820709",
              "type": 1
            },
            {
              "siteId": 38,
              "siteName": "鸿鑫雅居换热站",
              "catalogueId": 100045,
              "address": "沙依巴克区马料地街与马料地街南一巷交叉口",
              "street": "西山片区管委会永乐一巷社区（8782875、张书记13899988441）",
              "location": "87.564852,43.815922",
              "type": 1
            },
            {
              "siteId": 39,
              "siteName": "凯旋二期换热站",
              "catalogueId": 100046,
              "address": "沙依巴克区平川路199号",
              "street": "西山片区管委会永平巷社区（8772057、张亦书记15899239760）",
              "location": "87.558798,43.817236",
              "type": 1
            },
            {
              "siteId": 40,
              "siteName": "中泰雅居南区换热站",
              "catalogueId": 100047,
              "address": "沙依巴克区恰尔巴格街2600号",
              "street": "西山片区管委会马料地街西社区（8723017、刘书记18999273071）",
              "location": "87.558825,43.812516",
              "type": 1
            },
            {
              "siteId": 46,
              "siteName": "世和府D换热站",
              "catalogueId": 147182,
              "address": "沙区西环中路177号",
              "street": "西山片区管委会永乐一巷社区(8782875、张书记13899988441)",
              "location": "87.56668,43.81828",
              "type": 1
            },
            {
              "siteId": 47,
              "siteName": "安佳大厦换热站",
              "catalogueId": 147183,
              "address": "沙区克拉玛依西街880号",
              "street": "西山片区管委会平川路社区（8777310、刘书记15352629095）",
              "location": "87.564313,43.822875",
              "type": 1
            },
            {
              "siteId": 48,
              "siteName": "君诚丽苑换热站",
              "catalogueId": 147184,
              "address": "沙区马料地街南二巷",
              "street": "西山片区管委会马料地街南社区（杜书记18140811953）",
              "location": "87.566034,43.813902",
              "type": 1
            },
            {
              "siteId": 49,
              "siteName": "科研楼换热站",
              "catalogueId": 147185,
              "address": "沙区泽普街466号",
              "street": "西山片区管委会永平巷社区（8772057、张亦书记15899239760）",
              "location": "87.556431,43.818465",
              "type": 1
            }
          ]
        },
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "5",
          "layerNo": null,
          "type": "2",
          "name": "二次网（供水）",
          "icon": "1739109548492939266",
          "color": "#EC808D",
          "size": "1",
          "layerIndex": null,
          "opacity": 0,
          "sort": null,
          "status": null,
          "children": [
            {
              "siteId": 43,
              "siteName": "管线测试3",
              "catalogueId": 0,
              "location": "[[87.583461,43.809],[87.568549,43.815551],[87.564444,43.822862]]",
              "type": 2
            }
          ]
        },
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "6",
          "layerNo": null,
          "type": "2",
          "name": "二次网（回水）",
          "icon": "1739109591979483137",
          "color": "#8080FF",
          "size": "1",
          "layerIndex": null,
          "opacity": 0,
          "sort": null,
          "status": null,
          "children": [
            {
              "siteId": 44,
              "siteName": "管线测试4",
              "catalogueId": 0,
              "location": "[[87.582461,43.859],[87.578549,43.815651],[87.514444,43.872862]]",
              "type": 2
            }
          ]
        },
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "2",
          "layerNo": null,
          "type": "1",
          "name": "热源",
          "icon": "1739109397011456001",
          "color": "11",
          "size": "[36,36]",
          "layerIndex": 0,
          "opacity": 1,
          "sort": null,
          "status": null,
          "children": [
            {
              "siteId": 45,
              "siteName": "热源测试",
              "catalogueId": 100005,
              "location": "87.565414,43.820709",
              "type": 1
            }
          ]
        },
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "7",
          "layerNo": null,
          "type": "1",
          "name": "阀门（一次网）",
          "icon": "1739109635549913090",
          "color": "1",
          "size": "[36,36]",
          "layerIndex": null,
          "opacity": 1,
          "sort": null,
          "status": null,
          "children": [
            {
              "type": 1
            }
          ]
        },
        {
          "createTime": null,
          "createUser": null,
          "updateTime": null,
          "updateUser": null,
          "id": "8",
          "layerNo": null,
          "type": "1",
          "name": "阀门（二次网）",
          "icon": "1739109660698959873",
          "color": "1",
          "size": "[36,36]",
          "layerIndex": null,
          "opacity": 1,
          "sort": null,
          "status": null,
          "children": [
            {
              "type": 1
            }
          ]
        }
      ],
      // 筛选后所有站点的列表
      stationList: [],
      // 弹出层标题
      title: "",
      detailDialog: {
        // 详情弹出框显示隐藏
        detailVisible: false,
        // 详情类型(换热站1 管道0 )
        detailType: 0,
      },
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        markName: [
          { required: true, message: '请输入标注名称', trigger: 'blur' },
        ]
      },
      // 地图控件
      map: null,
      // 地图缩放范围（0-18）
      zoom: 5,
      // 地图放大缩小控件
      control: null,
      // 切换地图类型控件
      ctrl: null,
      // 比例尺控件
      scale: null,

      // 当前操作对象
      currentEdit: {
        name: '',
        model: null
      },
      // 画线工具类
      tools: {
        // 标注工具
        marker: {
          toolModel: '',
          isEdit: false
        },
        // 矩形工具
        rect: {
          toolModel: '',
          isEdit: false
        },
        // 测距工具
        line: {
          toolModel: '',
          isEdit: false
        },
        // 多边形工具
        polygon: {
          toolModel: '',
          isEdit: false
        },
        // 圆形工具
        circle: {
          toolModel: '',
          isEdit: false
        }
      },
    }
  },
  computed: {
    // 判断当前是否可以进行操作
    editStatus() {
      return Object.values(this.tools).every(tool => tool.isEdit === false)
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 上方筛选
    selectChange(val) {
      const allModel = this.map.getOverlays()
      const targetModel = allModel.find(model => {
        return model.siteId && model.siteId === val
      })
      let targetLngLat = targetModel.getLngLat()
      this.map.panTo(targetLngLat)
      // TODO 弹起信息框
    },
    // 下方筛选
    handleChange(val) {
      this.map.clearOverLays()
      this.getMapModel()
    },
    // 初始化地图
    initMap() {
      let that = this
      // http://192.168.0.165:8080/11/1695/878.jpg
      var imageURL = "http://192.168.0.165:8082/{z}/{x}/{y}.jpg"
      //创建自定义图层对象
      let lay = new T.TileLayer(imageURL, { errorTileUrl: 'http://192.168.0.165:8082/error.jpg', zIndex: 100, bounds: [new T.LngLat(-180, 83), new T.LngLat(180, -70.05112878)] })

      var config = { layers: [lay] }
      this.map = new T.Map('mapDiv', config)
      // 设置缩放大小
      this.map.setMinZoom(12)
      this.map.setMaxZoom(16)
      this.map.centerAndZoom(new T.LngLat(87.4544, 43.795), this.zoom)

      // 设置地图点击事件
      // this.map.addEventListener("click", (e) => {
      // })
      // 设置地图的显示范围
      var bs = this.map.getBounds()   //获取可视区域
      // this.map.setMaxBounds(new T.LngLatBounds(new T.LngLat(bs.Lq.lng, bs.Lq.lat), new T.LngLat(bs.kq.lng, bs.kq.lat)))
      // this.map.setMaxBounds(new T.LngLatBounds(new T.LngLat(117.90996053, 24.90460417), new T.LngLat(118.26841359, 24.57800975)))

      // 缩放
      this.control = new T.Control.Zoom()
      this.map.addControl(this.control)
      // 类型
      this.ctrl = new T.Control.MapType()
      this.map.addControl(this.ctrl)
      // 比例尺
      this.scale = new T.Control.Scale()
      this.map.addControl(this.scale)
      this.setMenuOptions()

      // 标注工具
      this.tools.marker.toolModel = new T.MarkTool(this.map, { follow: true })
      // 为绘画上去的图形添加绑定事件
      this.tools.marker.toolModel.addEventListener('mouseup', function (e) {
        e.currentMarker.setOpacity(0.7)
        e.currentMarker.id = Date.now()
        // 标记名称
        let label = new T.Label({
          type: 'markLabel',
          id: e.currentMarker.id,
          lngLat: e.currentMarker.getLngLat(),
          text: e.currentMarker.markName || '暂无名称,双击标记可进行编辑',
          position: e.currentMarker.getLngLat(),
          offset: new T.Point(10, -30),
        })
        that.map.addOverLay(label)

        // 添加事件
        e.currentMarker.addEventListener('click', (e1) => {
          // 进行可拖拽操作
          if (that.currentEdit.model) return
          that.changeMarkOpacity()
          e1.target.setOpacity(1)
          that.tools.marker.isEdit = true
          that.currentEdit.model = e1.target
          that.currentEdit.name = 'marker'
          e1.target.enableDragging()
        })

        // 悬浮显示名称
        e.currentMarker.addEventListener('mouseover', (e1) => {

        })

        // 开始拖拽触发
        e.currentMarker.addEventListener('dragstart', (e1) => {
          let preLabelModel = that.getLabelById(e1.target.id)
          that.map.removeOverLay(preLabelModel)
        })

        // 拖拽不显示弹窗
        e.currentMarker.addEventListener('drag', (e1) => {

        })

        // 结束拖拽触发
        e.currentMarker.addEventListener('dragend', (e1) => {
          let label = new T.Label({
            type: 'markLabel',
            id: e1.target.id,
            lngLat: e1.target.getLngLat(),
            text: e1.target.markName || '暂无名称,双击标记可进行编辑',
            position: e1.target.getLngLat(),
            offset: new T.Point(10, -30),
          })
          that.map.addOverLay(label)
        })
        // 双击修改信息
        e.currentMarker.addEventListener('dblclick', (e1) => {
          that.open = true
        })
      })


      // 画图-矩形工具
      this.tools.rect.toolModel = new T.RectangleTool(this.map)
      // 为绘画上去的图形添加绑定事件
      this.tools.rect.toolModel.addEventListener('draw', function (e) {
        e.currentRectangle.addEventListener('click', (e1) => {
          if (that.currentEdit.model) return
          that.tools.rect.isEdit = true
          that.currentEdit.model = e1.target
          that.currentEdit.name = 'rect'
          e1.target.enableEdit()
        })
      })

      // 画图-测距工具
      this.tools.line.toolModel = new T.PolylineTool(this.map, { showLabel: true })
      this.tools.line.toolModel.addEventListener('draw', function (e) {
        e.currentPolyline.addEventListener('click', (e1) => {
          if (that.currentEdit.model) return
          that.tools.line.isEdit = true
          that.currentEdit.model = e1.target
          that.currentEdit.name = 'line'
          e1.target.enableEdit()
        })
      })

      // 画图-多边形工具
      this.tools.polygon.toolModel = new T.PolygonTool(this.map, {
        showLabel: true,
        color: "blue",
        weight: 3,
        opacity: 0.5,
        fillColor: "#FFFFFF",
        fillOpacity: 0.5
      })
      this.tools.polygon.toolModel.addEventListener('draw', function (e) {
        e.currentPolygon.addEventListener('click', (e1) => {
          if (that.currentEdit.model) return
          that.tools.polygon.isEdit = true
          that.currentEdit.model = e1.target
          that.currentEdit.name = 'polygon'
          e1.target.enableEdit()
        })
      })

      // 画图-圆形工具
      this.tools.circle.toolModel = new T.CircleTool(this.map, { color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5 })
      this.tools.circle.toolModel.addEventListener('drawend', function (e) {
        e.currentCircle.addEventListener('click', (e1) => {
          if (that.currentEdit.model) return
          that.tools.circle.isEdit = true
          that.currentEdit.model = e1.target
          that.currentEdit.name = 'circle'
          e1.target.enableEdit()
        })
      })

      // 添加图片覆盖 TODO 需要服务器图片进行贴图
      let img = new T.ImageOverlay("http://lbs.tianditu.gov.cn/images/openlibrary/gugong.jpg", new T.LngLatBounds(
        new T.LngLat(116.385360, 39.911380),
        new T.LngLat(116.395940, 39.921400)), {
        opacity: 1,
        alt: "故宫博物院"
      })
      this.map.addOverLay(img)

      // 添加图片标注
      // var icon = new T.Icon({
      //   iconUrl: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      //   iconSize: new T.Point(100, 100),
      //   iconAnchor: new T.Point(10, 25)
      // })
      // var marker = new T.Marker(new T.LngLat(116.411794, 39.9068), { icon: icon })
      // this.map.addOverLay(marker)

      // 添加地图版权

      var copyControl = new T.Control.Copyright({ position: T_ANCHOR_BOTTOM_RIGHT })
      this.map.addControl(copyControl)
      var bs = this.map.getBounds()   //返回地图可视区域
      copyControl.addCopyright({
        id: 1,
        content: "<a href='https://www.tianditu.gov.cn' target='_blank' style='font-size:14px;background:yellow'>天地图 www.tianditu.gov.cn</a>",
        bounds: bs
      })

      // 获取覆盖物
      this.getMapModel()
    },

    // 地图回显
    getMapModel() {
      if (!this.modelList.length) return
      let filterList = []
      this.modelList.forEach(parent => {
        if (this.currentSelect.includes(parent.id)) {
          parent.children.forEach(child => {
            // 复制子项并新增 parentId 字段
            const newChild = { ...child, parentId: parent.id }
            filterList.push(newChild)
          })
        }
      })
      this.stationList = filterList
      this.stationList.forEach(station => {
        this.detailDialog.detailType = station.type
        if (station.type === 1) {
          // 贴图
          if (!station.location) return
          let iconUrl = this.modelList.find(model => {
            return model.id === station.parentId
          }).icon
          iconUrl = "http://124.117.237.118:7018/api/sysFileInfo/preview?id=" + iconUrl
          let sizeArr = this.modelList.find(model => {
            return model.id === station.parentId
          }).size
          if (sizeArr) sizeArr = JSON.parse(sizeArr)
          const iconSize = new T.Point(sizeArr[0], sizeArr[1])
          const posArr = station.location.split(',')
          const position = T.LngLat(posArr[0], posArr[1])
          var icon = new T.Icon({
            iconUrl,
            iconSize,
            iconAnchor: new T.Point(10, 25)
          })
          var marker = new T.Marker(position, { icon: icon })
          marker.siteId = station.siteId

          // 点击后打开信息窗口
          marker.addEventListener('click', (e) => {
            // 调用查询接口
            this.detailDialog.detailVisible = true
            this.detailDialog.detailType = station.type
          })
          this.map.addOverLay(marker)
        } else if (station.type === 2) {
          if (!station.location) return
          // 线条
          let points = []
          let posArr = JSON.parse(station.location)
          posArr.forEach(lngLat => {
            points.push(new T.LngLat(lngLat[0], lngLat[1]))
          })
          const color = this.modelList.find(model => {
            return model.id === station.parentId
          }).color
          var line = new T.Polyline(points, { color })
          line.addEventListener('click', (e) => {
            this.detailDialog.detailVisible = true
            this.detailDialog.detailType = station.type
          })
          //向地图上添加线
          this.map.addOverLay(line)
        }
      })
    },

    // 修改透明度 使用排他方法区分标点的透明度 用来区别当前编辑的对象
    changeMarkOpacity() {
      const overlays = this.map.getOverlays()
      const allMarkers = overlays.filter(overlay => {
        return (
          overlay instanceof T.Marker
        )
      })
      allMarkers.forEach(mark => {
        mark.setOpacity(0.7)
      })
    },

    // 找出对应标记的标签 进行标签的覆盖操作
    getLabelById(id) {
      // 获取地图上所有覆盖物
      const overlays = this.map.getOverlays()
      // 遍历查找标注（Marker类型）
      const matchedMarker = overlays.find(overlay => {
        return (
          overlay.options.type === 'markLabel' && overlay.options.id === id
        )
      })
      return matchedMarker
    },

    // 提交
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.currentEdit.model.markName = this.form.markName
          // 删除标记点之前的标签对象
          let preLabelModel = this.getLabelById(this.currentEdit.model.id)
          this.map.removeOverLay(preLabelModel)
          // 修改名称
          // 重新创建一个label对象
          let label = new T.Label({
            type: 'markLabel',
            id: this.currentEdit.model.id,
            lngLat: this.currentEdit.model.getLngLat(),
            text: this.currentEdit.model.markName || '暂无名称,双击标记可进行编辑',
            position: this.currentEdit.model.getLngLat(),
            offset: new T.Point(10, -30),
          })
          this.map.addOverLay(label)
          this.$message.success("操作成功")
          this.open = false
          this.form = {}
          this.$refs.form.resetFields()
        }
      })
    },

    // 删除对象操作
    handleRemove() {
      if (this.currentEdit.model) {
        console.log(this.currentEdit.model)
        // 是标注 删除标签
        if (this.currentEdit.model.id) {
          let label = this.getLabelById(this.currentEdit.model.id)
          this.map.removeOverLay(label)
        }

        this.map.removeOverLay(this.currentEdit.model)
        this.currentEdit.model = null
        this.tools[this.currentEdit.name].isEdit = false
        this.$message.success('删除成功')
      }
    },
    // 确认编辑操作
    handleEdit() {
      if (this.currentEdit.model) {
        if (this.currentEdit.name === 'marker') {
          // 标记与其他编辑方式不一样
          this.currentEdit.model.disableDragging()
          this.changeMarkOpacity()
        } else {
          this.currentEdit.model.disableEdit()
        }
        this.currentEdit.model = null
        this.tools[this.currentEdit.name].isEdit = false
        this.currentEdit.name = ''
        this.$message.success('编辑成功')
      }
    },

    //  画图工具操作
    operateTool(toolName) {
      this.tools[toolName].toolModel.open()
    },

    // 右键菜单
    setMenuOptions() {
      let menu = new T.ContextMenu({ width: 140 })
      var txtMenuItem = [
        {
          text: '放大',
          callback: function () {
            this.map.zoomIn()
          }
        },
        {
          text: '缩小',
          callback: function () {
            this.map.zoomOut()
          }
        },
        {
          text: '放置到最大级',
          callback: function () {
            this.map.setZoom(18)
          }
        },
        {
          text: '查看全国',
          callback: function () {
            this.map.setZoom(4)
          }
        },
        // {
        //   text: '获得右键点击处坐标',
        //   isDisable: false,
        //   callback: function (lnglat) {
        //     alert(lnglat.getLng() + "," + lnglat.getLat())
        //   }
        // }
      ]

      for (var i = 0; i < txtMenuItem.length; i++) {

        //添加菜单项
        var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback)
        //item.disable();
        menu.addItem(item)
        if (i == 1 || i == 3) {
          //添加分割线
          menu.addSeparator()
        }
      }
      this.map.addContextMenu(menu)
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: 100%;
}

#mapDiv {
  width: 100%;
  height: calc(100vh - 40px);
  z-index: 1;
}

.btn-container {
  display: flex;
  height: 40px;
  align-items: center;
}

.map-container {
  position: relative;
}

.chebox-container {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 360px;
  padding: 0px 4px;
  background-color: #fff;
  z-index: 10;
  border-radius: 4px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}

.chebox-container .chebox-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 4px 0;
}

.chebox-container .chebox-item .item-name {
  margin: 0 4px;
}

.chebox-container .chebox-item .item-icon {
  width: 20px;
  height: 20px;
}

.input-container {
  position: absolute;
  top: 48px;
  left: 48px;
  z-index: 10;
}

.detail-form-container {}

.detail-form-container .form-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-form-container .form-top .top-pic {
  width: 50px;
  height: 50px;
}

.detail-form-container .form-top .top-title {
  font-weight: 800;
  font-size: 18px;
  margin: 10px 0;
}

.detail-form-container .content-item {
  margin-bottom: 20px;
}
</style>
